<template>
	<view>
		<view class="team-member">
			<view class="title">
				团队成员信息
			</view>
			<view class="no-content" v-if="teamPersonList==null||teamPersonList.length === 0 ">
				<text>已将到底了</text>
			</view>
			<view v-else>
				<!-- <uni-search-bar :radius="100" @confirm="search" placeholder="请输入工号或姓名"></uni-search-bar> -->
				<t-table>
					<t-tr>
						<t-th>工号</t-th>
						<t-th>姓名</t-th>
						<t-th>职称</t-th>
						<t-th>操作</t-th>
					</t-tr>
					<t-tr v-for="item in teamPersonList" :key="item.id">
						<t-td>{{item.id}}</t-td>
						<t-td>{{item.name}}</t-td>
						<t-td>{{item.professionalTitle}}</t-td>
						<t-td>
							<view @click="del(item.id)">删除</view>
						</t-td>
					</t-tr>
				</t-table>
			</view>
			<view class="fix_button" @click="add">+</view>
			<!-- <uni-fab :pattern="pattern" horizontal="right" @fabClick="add"></uni-fab> -->
		</view>
		<uni-popup ref="addTeamDialog" type="dialog">
			<uni-popup-dialog mode="input" title="请输入学工号" :value="addMemberId"  @confirm="addTeamMemberConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getMember,
		delMember,
		addMember,
		findPersonById
	} from '@/api/tTeam.js'
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	// import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	// import uniFab from '@/components/uni-fab/uni-fab.vue';
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {
			tTable,
			tTh,
			tTr,
			tTd,
			uniPopupDialog,
			// uniSearchBar,
			// uniFab
		},
		data() {
			return {
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#ffaa00',
					buttonColor: '#ffaa00'
				},
				teamId: '',
				teamPersonList: [],
				teamName :[]
				
			}
		},
		methods: {
			getData() {
				uni.showLoading()
				getMember({
					teamId: this.teamId
				}).then(res => {
					this.teamPersonList = res.data.data
					for(let i in this.teamPersonList){
						findPersonById({
							id: this.teamPersonList[i].id
						}).then(res2 => {
							this.teamPersonList[i].name = res2.data.data.name
						})
					}
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
					uni.showModal({
						content: '请求失败'
					})
				})
			},
			del(tid) {
				uni.showModal({
					content: "您确定要删除:" + tid,
					success: res => {
						if (res.confirm) {
							delMember({
								teamId: this.teamId,
								tid: tid
							}).then(res => {
								// console.log(res)
								if (res.data.code == 0) {
									uni.showModal({
										content: '操作成功',
										complete:()=> {
											this.getData()
										}
									})
								} else {
									uni.showModal({
										content: '操作失败'
									})
								}
							}).catch(err => {
								uni.showModal({
									content: '请求失败'
								})
							})
						}
					}
				})
			},
			add() {
				this.$refs.addTeamDialog.open()
			},
			addTeamMemberConfirm(done, val) {
				addMember({
					tid: val,
					teamId: this.teamId
				}).then(res => {
					if (res.data.code == 0) {
						uni.showModal({
							content: '添加成功'
						})
						this.getData()
					} else {
						uni.showModal({
							content: '添加失败'
						})
					}
				}).catch(err => {
					uni.showModal({
						content: '请求失败'
					})
				})
				done()
			}
		},
		onLoad(option) {
			this.teamId = option.teamId
			this.getData()
		}
	}
</script>

<style>
	page{
		font-family: 'Courier New', Courier, monospace;
	}
	
	.team-member {
		position: relative;
	}

	.title {
		color: #FFFFFF;
		height: 50px;
		padding: 10px;
		font-size: 18px;
		box-sizing: border-box;
		background-color: #ffaa00;
	}

	.title::after {
		content: "";
		position: absolute;
		right: 0;
		top: 0;
		border-right: 50px solid white;
		border-left: 50px solid transparent;
		border-bottom: 50px solid transparent;
	}

	.no-content {
		display: flex;
		height: auto;
		padding: 10px;
		font-size: 14px;
		justify-content: center;
		align-items: center;
		background-color: #f7f7f7;
	}

	.content {
		padding: 15px;
		font-size: 14px;
		line-height: 20px;
		background-color: #f9f9f9;
		color: #666;
	}
	.fix_button{
		width:100rpx;
		height: 100rpx;
		text-align: center;
		line-height: 90rpx;
		background-color: #ffaa00;
		position: fixed;
		bottom: 50rpx;
		right:50rpx;
		font-size: 100rpx;
		color: #FFFFFF;
		border-radius: 50%;
		box-shadow: 0px 0px 8rpx 8rpx #DDDDDD;
		z-index: 10;
	}
</style>
